<template>
  <div>
    <card v-if="$store.state.superAdmin == 'true'" style="margin-bottom: 10px">
      <el-select
        style="width: 100%"
        v-model="museumId"
        @change="change"
        filterable
        placeholder="请选择博物馆"
      >
        <el-option
          v-for="item in museumList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </card>

    <Card>
      <Spin fix size="large" v-if="loading1"></Spin>

      <Form
        ref="form"
        style="margin-top: 10px"
        :model="data"
        :label-width="180"
      >
        <FormItem label="微信端预约：" v-if="!isv">
          <RadioGroup v-model="data.openAppointment" type="button">
            <Radio label="开启"></Radio>
            <Radio label="关闭"></Radio>
          </RadioGroup>
        </FormItem>

        <FormItem label="支付宝端预约：">
          <!-- <span>支付宝端预约：</span> -->
          <RadioGroup v-model="data.openAliAppointment" type="button">
            <Radio label="开启"></Radio>
            <Radio label="关闭"></Radio>
          </RadioGroup>
          <Tooltip
            max-width="400"
            content="开启后，游客可使用支付宝端进入预约"
            placement="right"
          >
            <Icon
              style="margin-left: 10px; margin-top: 7px"
              size="20"
              type="ios-help-circle-outline"
            />
          </Tooltip>
        </FormItem>

        <!-- <Divider v-if="!isv" /> -->
        <!-- <FormItem label="团队预约功能：">
          <RadioGroup v-model="data.openTeamAppointment" type="button">
            <Radio label="开启"></Radio>
            <Radio label="关闭"></Radio>
          </RadioGroup>
          <Tooltip
            max-width="400"
            content="开启后，可选择进行团队预约，通过上传指定团队人员信息表或分享填写信息后进行预约"
            placement="right"
          >
            <Icon
              style="margin-left: 10px; margin-top: 7px"
              size="20"
              type="ios-help-circle-outline"
            />
          </Tooltip>
        </FormItem>
        <FormItem
          label="团队预约限制："
          v-if="data.openTeamAppointment == '开启'"
        >
          <div style="display: flex; align-items: center">
            <p>人数下限：</p>
            <InputNumber
              :min="1"
              v-model="data.teamLimitMin"
              style="width: 300px"
            ></InputNumber>
            <Tooltip
              max-width="400"
              content="每个团队预约人数限制"
              placement="right"
            >
              <Icon
                style="margin-left: 10px; margin-top: 7px"
                size="20"
                type="ios-help-circle-outline"
              />
            </Tooltip>
          </div>
          <div style="display: flex; align-items: center; margin-top: 10px">
            <p>人数上限：</p>
            <InputNumber
              :min="1"
              v-model="data.teamLimitMax"
              style="width: 300px"
            ></InputNumber>
          </div>
        </FormItem>
        <div style="display: flex; width: 1220px">
          <FormItem
            label="团队预约短信通知："
            v-if="data.openTeamAppointment == '开启'"
            style="width: 1200px"
          >
            <Input
              v-model="notifyPhone"
              style="width: 300px"
              @blur.native.capture="aaa"
              placeholder="请输入手机号"
            ></Input>

            <RadioGroup
              v-model="teamNotifySwitch"
              type="button"
              @on-change="findphone"
            >
              <Radio label="开启"></Radio>
              <Radio label="关闭"></Radio>
            </RadioGroup>
            <Tooltip
              max-width="900"
              content="开启并填写指定接收团队通知的手机号码，在有团队预约后将向指定号码发送短信通知。"
              placement="right"
            >
              <Icon
                style="margin-left: 10px; margin-top: 7px"
                size="20"
                type="ios-help-circle-outline"
              />
            </Tooltip>
          </FormItem>


        </div>

        <FormItem
          label="预约讲解服务："
          v-if="data.openTeamAppointment == '开启'"
        >
          <RadioGroup v-model="data.hasCommentService" type="button">
            <Radio label="开启"></Radio>
            <Radio label="关闭"></Radio>
          </RadioGroup>
          <Tooltip
            max-width="700"
            content="开启后，游客进行团队预约时可勾选是否预约讲解服务，如游客有该需求，指定接收团队通知的手机号码将接收到相应的预约讲解通知，请接收人在收到预约通知后务必安排好对应讲解服务。"
            placement="right"
          >
            <Icon
              style="margin-left: 10px; margin-top: 7px"
              size="20"
              type="ios-help-circle-outline"
            />
          </Tooltip>
        </FormItem>
        <FormItem
          label="简易团队预约："
          v-if="data.openTeamAppointment == '开启'"
        >
          <RadioGroup v-model="data.simpleTeamBookSwitch" type="button">
            <Radio label="开启"></Radio>
            <Radio label="关闭"></Radio>
          </RadioGroup>

          <Tooltip
            max-width="700"
            content="【谨慎开启】开启后，文旅绿码系统将不再校验团队游客身份和健康码信息，可无需填写团队内每个人的信息快捷完成预约。馆方如有管理需求，可选择通过上传自定义团体参观登记表，并要求入馆时携带来留存参观人员信息。"
            placement="right"
          >
            <Icon
              style="margin-left: 10px; margin-top: 7px"
              size="20"
              type="ios-help-circle-outline"
            />
          </Tooltip>
        </FormItem>

        <FormItem
          v-if="
            data.openTeamAppointment == '开启' &&
            data.simpleTeamBookSwitch == '开启'
          "
        >
          <el-upload
            class="upload-demo"
            action="https://museum-voice.bowu66.com/stage/reservation/uploadMuseumAttachment"
            multiple
            :limit="1"
            :data="uploadData"
            :headers="uploadheaders"
            :file-list="fileList"
          >
            <el-button size="small" type="primary"
              >点击上传团体参观登记表</el-button
            >
          </el-upload>
        </FormItem> -->

        <Divider v-if="!isv" />
        <FormItem label="语音导览功能：" v-if="!isv">
          <RadioGroup v-model="data.online" type="button">
            <Radio label="开启"></Radio>
            <Radio label="关闭"></Radio>
          </RadioGroup>
        </FormItem>
        <Divider v-if="!isv" />
        <FormItem label="文创商城功能：">
          <RadioGroup v-model="data.openCulturalMall" type="button">
            <Radio label="开启"></Radio>
            <Radio label="关闭"></Radio>
          </RadioGroup>
          <Tooltip
            max-width="700"
            content="【请联系客服小张协助开启配置】开启后将在文旅绿码文创板块开启馆方文创商城进行文创产品展示售卖。"
            placement="right"
          >
            <Icon
              style="margin-left: 10px; margin-top: 7px"
              size="20"
              type="ios-help-circle-outline"
            />
          </Tooltip>
        </FormItem>
        <Divider v-if="!isv" />
        <FormItem label="临时闭馆：" v-if="!isv">
          <RadioGroup v-model="data.tempCloseFlag" type="button">
            <Radio label="开启"></Radio>
            <Radio label="关闭"></Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="临时闭馆标语：" v-if="data.tempCloseFlag == '开启'">
          <Input
            placeholder="请输入"
            v-model="data.tempCloseTips"
            style="width: 100%"
            clearable
          ></Input>
        </FormItem>

        <!--         <p v-if="data.online == '开启'" style="margin-left:120px;margin-bottom:20px">如果贵馆有开发完善的微信小程序，请在下面填入小程序的appId和路径，将会在文旅绿码中跳转到该微信小程序。</p>
        <FormItem v-if="data.online == '开启'" label="小程序appId：">
          <Input placeholder="请输入微信小程序appId" style="width:300px" v-model="data.appId" clearable></Input>
        </FormItem>
        <FormItem v-if="data.online == '开启'" label="小程序路径：">
          <Input placeholder="请输入微信小程序路径" style="width:300px" v-model="data.appletsPages" clearable></Input>
        </FormItem> -->

        <Divider />
        <FormItem label="场馆名称：">
          <Input
            placeholder="请输入名称"
            v-model="data.name"
            style="width: 500px"
            clearable
          ></Input>
        </FormItem>
        <FormItem label="场馆类型：">
          <RadioGroup v-model="data.typeMuseum[0]" type="button">
            <Radio label="红色场馆"></Radio>
            <Radio label="文史类场馆"></Radio>
            <Radio label="自然馆"></Radio>
            <Radio label="科技馆"></Radio>
            <Radio label="图书档案馆"></Radio>
            <Radio label="景区"></Radio>
            <Radio label="其他"></Radio>
          </RadioGroup>
          <Tooltip max-width="400" content="馆方的类型选择" placement="right">
            <Icon
              style="margin-left: 10px; margin-top: 7px"
              size="20"
              type="ios-help-circle-outline"
            />
          </Tooltip>
        </FormItem>
        <FormItem label="场馆小类型：" v-if="data.typeMuseum[0] == '宗教场所'">
          <RadioGroup v-model="data.typeMuseum[1]" type="button">
            <Radio label="佛教"></Radio>
            <Radio label="道教"></Radio>
            <Radio label="伊斯兰教"></Radio>
            <Radio label="天主教"></Radio>
            <Radio label="基督教"></Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="场馆封面配图：">
          <div style="display: flex">
            <vue-uploadimg
              :imgUrl="imgUrl"
              :clear="clear"
              style="width: 400px"
              @uploadImg="uploadImg"
            ></vue-uploadimg>
            <div>
              <p style="margin-left: 10px">
                图片需小于200K，可点击<span class="yasuo" @click="yasuo">
                  此处 </span
                >对图片进行压缩
              </p>
              <p style="margin-left: 10px">
                或者使用第三方压缩工具进行压缩图片：
                <a
                  target="_blank"
                  style="color: red"
                  href="https://www.bejson.com/ui/compress_img/"
                  >点击前往</a
                >
              </p>
            </div>
            <Tooltip
              max-width="400"
              content="配置场馆封面显示图片，建议尺寸比例16:9，图片需小于200k"
              placement="right"
            >
              <Icon
                style="margin-left: 10px; margin-top: 7px"
                size="20"
                type="ios-help-circle-outline"
              />
            </Tooltip>
          </div>
        </FormItem>
        <!-- <FormItem label="场馆视频上传：">
          <div style="display:flex">
            <uploadVideo :videoUrl="videoUrl"  style="width:400px" @uploadvideo="uploadvideo"></uploadVideo>

          </div>



        </FormItem>  -->

        <FormItem label="开放信息（仅做展示）：">
          <div style="display: flex">
            <Input
              placeholder="请输入开放信息 类似于09:00-16:00 （周六、周日闭馆）此处仅作展示用途"
              v-model="data.openingInformation"
              clearable
              style="width: 900px"
            ></Input>
            <!-- <Tooltip
            max-width="400"
            content="显示于预约信息填写页面，供游客参考。"
            placement="right"
          >
            <Icon
              style="margin-left: 10px; margin-top: 7px"
              size="20"
              type="ios-help-circle-outline"
            />
          </Tooltip> -->
            <el-popover placement="right" width="434" trigger="hover">
              <div style="margin-bottom: 20px">
                显示于预约信息填写页面，供游客参考。
              </div>
              <div>
                <img
                  src="../assets/image/开放时间（仅做展示）.jpg"
                  alt=""
                  width="414"
                  height="736"
                />
              </div>
              <div slot="reference">
                <Icon
                  style="margin-left: 15px; margin-top: 7px"
                  size="20"
                  type="ios-help-circle-outline"
                />
              </div>
            </el-popover>
          </div>
        </FormItem>
        <FormItem label="场馆标签：">
          <div style="display: flex">
            <Input
              placeholder="请输入展馆标签"
              v-model="data.label"
              clearable
              style="width: 900px"
            ></Input>
            <!-- <Tooltip
            max-width="400"
            content="场馆标签，展示于场馆预约首页，可自定义填写馆方称号、类别信息等，如国家一级馆、自然类科普服务馆等"
            placement="right"
          >
            <Icon
              style="margin-left: 10px; margin-top: 7px"
              size="20"
              type="ios-help-circle-outline"
            />
          </Tooltip> -->

            <!-- 这个是用来图片hover -->
            <el-popover placement="right" width="434" trigger="hover">
              <div style="margin-bottom: 20px">
                场馆标签，展示于场馆预约首页，可自定义填写馆方称号、类别信息等，如国家一级馆、自然类科普服务馆等
              </div>
              <div>
                <img
                  src="../assets/image/场馆标签.jpg"
                  alt=""
                  width="414"
                  height="736"
                />
              </div>
              <div slot="reference">
                <Icon
                  style="margin-left: 15px; margin-top: 7px"
                  size="20"
                  type="ios-help-circle-outline"
                />
              </div>
            </el-popover>
          </div>
        </FormItem>

        <FormItem label="开闭馆时间">
          <Input
            placeholder="开馆时间(例如:09:00)"
            v-model="data.arrivald1"
            style="width: 200px"
            clearable
          ></Input>
          <Input
            placeholder="停止入馆时间(例如:16:00)"
            v-model="data.arrivald2"
            style="width: 200px"
            clearable
          ></Input>
          <Input
            placeholder="闭馆时间(例如:17:00)"
            v-model="data.arrivald3"
            style="width: 200px"
            clearable
          ></Input>
        </FormItem>

        <FormItem label="咨询电话">
          <Input
            placeholder="请输入"
            v-model="data.consultPhone"
            style="width: 900px"
            clearable
          ></Input>
        </FormItem>
        <FormItem label="场馆所在城市：">
          <Cascader
            :data="data2"
            v-model="cascaderValue"
            trigger="hover"
            style="width: 900px; display: inline-block"
          ></Cascader>
          <Tooltip
            max-width="400"
            content="填写场馆所在行政区域"
            placement="right"
          >
            <Icon
              style="margin-left: 10px; margin-top: 7px"
              size="20"
              type="ios-help-circle-outline"
            />
          </Tooltip>
        </FormItem>
        <FormItem label="场馆详细地址：">
          <div style="display: flex; align-items: center">
            <Button
              type="info"
              style="margin-right: 10px"
              @click="dialogVisible = true"
              >点击按钮，在弹窗中搜索位置</Button
            >
            <Input
              disabled
              placeholder="请输入详情地址"
              v-model="address.detailAddress"
              clearable
              style="width: 619px; display: inline-block"
            ></Input>
            <!-- <Tooltip
              max-width="400"
              content="于地图选择器填写场馆的详细地址，将展示于场馆预约首页，游客可通过点击，访问地图插件进行路线规划。"
              placement="right"
            >
              <Icon
                style="margin-left: 10px; margin-top: 7px"
                size="20"
                type="ios-help-circle-outline"
              />
            </Tooltip> -->
            <!--
            <el-popover placement="right" width="434" trigger="hover">
              <div style="margin-bottom: 20px">
                于地图选择器填写场馆的详细地址，将展示于场馆预约首页，游客可通过点击，访问地图插件进行路线规划。
              </div>
              <div>
                <img
                  src="../assets/image/场馆详细地址.jpg"
                  alt=""
                  width="414"
                  height="736"
                />
              </div>
              <div slot="reference">
                <Icon
                  style="margin-left: 15px; margin-top: 7px"
                  size="20"
                  type="ios-help-circle-outline"
                />
              </div>
            </el-popover> -->
            <el-dialog
              :close-on-click-modal="false"
              title="详细地址"
              :visible.sync="dialogVisible"
              width="40%"
              :modal="false"
              @close="
                addreses = [];
                dagai = '';
              "
            >
              <div style="display: flex; margin-bottom: 20px">
                <Input
                  v-model="dagai"
                  placeholder="请输入场馆名称搜索"
                  style="display: inline-block"
                />
                <el-button
                  style="margin-left: 20px; line-height: 0"
                  type="success"
                  plain
                  @click="DetailedAddress"
                  >搜索</el-button
                >
              </div>
              <el-table
                :data="addreses"
                :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }"
                style="width: 100%"
              >
                <el-table-column prop="name" label="地址名"> </el-table-column>
                <el-table-column prop="detailAddress" label="详细地址">
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      type="success"
                      size="mini"
                      @click="
                        address = scope.row;
                        dialogVisible = false;
                      "
                      >选择</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-dialog>
          </div>
        </FormItem>
        <FormItem label="场馆详情：">
          <Input
            placeholder="请输入详情"
            :rows="6"
            maxlength="5000"
            show-word-limit
            type="textarea"
            v-model="data.about"
            clearable
            style="width: 900px"
          ></Input>
          <Tooltip
            max-width="400"
            content="场馆简介信息，展示于场馆预约首页。"
            placement="right"
          >
            <Icon
              style="margin-left: 10px; margin-top: 7px"
              size="20"
              type="ios-help-circle-outline"
            />
          </Tooltip>
        </FormItem>
        <FormItem label="用户称谓：">
          <div style="display: flex">
            <Input
              maxlength="4"
              placeholder="用户称谓（最多4个字）"
              v-model="chengwei"
              style="width: 900px"
            ></Input>
            <!-- <Tooltip
            max-width="400"
            content="于预约填写及个人信息填写处展示为用户称谓，可根据馆方属性进行自定义填写，如游客、观众、读者等"
            placement="right"
          >
            <Icon
              style="margin-left: 10px; margin-top: 7px"
              size="20"
              type="ios-help-circle-outline"
            />
          </Tooltip> -->
            <el-popover placement="right" width="868" trigger="hover">
              <div style="margin-bottom: 20px">
                于预约填写及个人信息填写处展示为用户称谓，可根据馆方属性进行自定义填写，如游客、观众、读者等
              </div>
              <div>
                <div class="display:flex;">
                  <img
                    src="../assets/image/用户称谓-1.jpg"
                    alt=""
                    width="414"
                    height="736"
                  />
                  <img
                    src="../assets/image/用户称谓-2.jpg"
                    alt=""
                    width="414"
                    height="736"
                  />
                </div>
              </div>
              <div slot="reference">
                <Icon
                  style="margin-left: 15px; margin-top: 7px"
                  size="20"
                  type="ios-help-circle-outline"
                />
              </div>
            </el-popover>
          </div>
        </FormItem>
        <FormItem label="海报分享文字：">
          <div style="display: flex">
            <Input
              maxlength="16"
              placeholder="分享文字(最多16个字)"
              v-model="shareText"
              style="width: 900px"
            ></Input>
            <!-- <Tooltip
            max-width="400"
            content="在游客预约后，可选择生成邀友同游海报进行分享，可填写并设置自定义文字进行宣传"
            placement="right"
          >
            <Icon
              style="margin-left: 10px; margin-top: 7px"
              size="20"
              type="ios-help-circle-outline"
            />
          </Tooltip> -->
            <el-popover placement="right" width="434" trigger="hover">
              <div style="margin-bottom: 20px">
                在游客预约后，可选择生成邀友同游海报进行分享，可填写并设置自定义文字进行宣传
              </div>
              <div>
                <img
                  src="../assets/image/海报分享文字.jpg"
                  alt=""
                  width="414"
                  height="736"
                />
              </div>
              <div slot="reference">
                <Icon
                  style="margin-left: 15px; margin-top: 7px"
                  size="20"
                  type="ios-help-circle-outline"
                />
              </div>
            </el-popover>
          </div>
        </FormItem>


        <!-- <FormItem>
          <Table width="550" border :columns="columns4" :data="data3"></Table>
        </FormItem> -->
        <Divider />
        <FormItem>
          <Button
            type="success"
            size="large"
            @click="submit"
            style="width: 300px"
            :loading="loading2"
            >提交更新</Button
          >
        </FormItem>
      </Form>

      <Modal title="压缩图片" v-model="modal2" width="50">
        <div class="yasuoImg" v-if="image == ''">
          <input
            class="inputFile"
            type="file"
            accept="image/*"
            @change="compressImg"
          />
          <p>点击上传您想要压缩的图片</p>
        </div>
        <Form ref="form" :model="data" :label-width="140" v-if="image != ''">
          <FormItem label="压缩前图片大小：">
            <p>{{ before }}</p>
          </FormItem>
          <FormItem label="压缩后图片大小：">
            <p>{{ now }}</p>
          </FormItem>
          <FormItem label="压缩后图片：">
            <img style="width: 100%" :src="image" />
          </FormItem>
        </Form>
        <div slot="footer">
          <Button
            type="warning"
            class="Button"
            @click="uploadAgain"
            :disabled="image == ''"
            >重新上传</Button
          >
          <Button
            type="primary"
            class="Button"
            @click="download"
            :disabled="image == ''"
            >下载图片</Button
          >
        </div>
      </Modal>
    </Card>
    <div class="righttop" @click="oneshot" v-if="iszhejiangm">
      一键入驻“浙里好玩”
    </div>
    <el-dialog
      title="入驻说明"
      :visible.sync="centerDialogVisible"
      width="30%"
      :append-to-body="true"
      center
    >
      <span
        >点击该按钮则视为同意入驻杭州博物文化有限公司，浙江省文旅厅“浙里好玩”平台。</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import store from "../vuex/store.js";
import uploadVideo from "../components/uploadVideo";
export default {
  inject: ["reload"],
  components: {
    uploadVideo,
  },
  data() {
    return {
      clearable: false,
      loading1: false,
      loading2: false,
      visible: false,
      isv: false,
      notifyPhone: "",
      data: {
        typeMuseum: [],
      },
      uploadData: {
        museumId: "",
      },
      uploadheaders: {
        token: localStorage.getItem("token"),
      },
      data2: [],
      cascaderValue: [],
      imgUrl: "",
      clear: true,
      modal: false,
      columns4: [],
      data3: [],
      longitude: "",
      latitude: "",
      local: "",
      search: "",
      aleardyChoose: "",
      mapStatus: false,
      img: "",
      museumList: [],
      museumId: "",
      museumId2: "",
      chengwei: "",
      shareText: "",
      chengweiId: "",
      shareId: "",
      teamNotifySwitch: "",
      modal2: false,
      image: "",
      before: "",
      now: "",
      store,
      centerDialogVisible: false,
      iszhejiangm: false,

      caption: {
        isSettle: "",
        jumpType: "",
      },
      // 场馆开放时间信息
      playTime: "",
      // 一个大概的详细地址
      dagai: "",
      // 详细地址的弹窗
      dialogVisible: false,
      // 详细地址的数据
      addreses: [],

      // 很详细的地址的对象
      address: {
        detailAddress: "",
        latitude: "",
        longitude: "",
        name: "",
      },
    };
  },

  created() {
    console.log(this.$store.state.museums)
    if (this.$store.state.superAdmin == "true") {
      this.getmuseumList();
    } else {
      if (this.$store.state.museums.length > 1) {
        this.museumId = parseInt(this.$store.state.museumId);
      } else {
        console.log(this.$store.state.museums.length)
        this.museumId = "";
      }
      this.cascadeProvinceCity();
      this.uploadData.museumId = this.museumId;
    }
  },

  mounted() {
    if (this.$router.history.current.params.id) {
      this.museumId2 = this.$router.history.current.params.id;
    }
    this.value();
    this.iszhejiang();
  },

  methods: {

    value() {
      // console.log(1)
      // console.log(1,this.$store.state.isv)
      // return this.$store.state.isv;
      // console.log(typeof(this.$store.state.isv))
      if (this.$store.state.isv == "false") {
        console.log(true);
        this.$store.state.isv = false;
        console.log(this.isv);
        console.log("有isv");
        // console.log(this.$store.state.isv)
        // this.isv = true
      } else {
        this.$store.state.isv = true;
        this.isv = true;
        console.log(this.isv);
        console.log("没有isv");
      }
    },
    iszhejiang() {
      this.$http("/stage/reservation/isZhejiangMuseum", {}, "get", (res) => {
        console.log(res);
        console.log(res.data.data);
        this.iszhejiangm = res.data.data;
      });
    },

    download() {
      console.log(12);
      this.downloadBlob(this.image);
    },
    uploadAgain() {
      this.image = "";
    },
    //获取文件名
    handleFileUpload(event) {
      event.preventDefault();
      this.file = this.$refs.file.files[0];
    },
    base64ToBlob(code) {
      let parts = code.split(";base64,");
      let contentType = parts[0].split(":")[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;
      let uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    },
    downloadBlob(content) {
      let aLink = document.createElement("a");
      let blob = this.base64ToBlob(content); // new Blob([content]);
      let evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", true, true); // initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = "test";
      aLink.href = URL.createObjectURL(blob);
      aLink.dispatchEvent(
        new MouseEvent("click", {
          bubbles: true,
          cancelable: true,
          view: window,
        })
      ); // 兼容火狐
    },
    compressImg(e) {
      var file = e.target.files[0];
      var before = parseInt(file.size / 1024);
      var imgUrl = URL.createObjectURL(file, { quality: 0 });
      let that = this;
      console.log(e.target.files[0]);
      lrz(imgUrl).then((rst) => {
        that.image = rst.base64;
        that.$Message.success("压缩成功");
        that.before = before + "K";
        that.now = parseInt(rst.fileLen / 1024) + "K";
      });
    },
    getmuseumList() {
      this.loading1 = true;
      this.$http("/stage/museum/getAppMuseumDropDown", {}, "post", (res) => {
        if (res.data.code == 200) {
          this.museumList = res.data.data;
          for (let i = 0; i < this.museumList.length; i++) {
            if (this.museumList[i].name.length > 50) {
              this.museumList[i].name =
                this.museumList[i].name.slice(0, 50) + "...";
            }
          }
          if (this.museumId2) {
            this.museumId = this.museumId2;
          } else {
            this.museumId = this.museumList[0].id;
          }
          this.uploadData.museumId = this.museumId;
          this.cascadeProvinceCity();
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    getAppletTitleForBack1() {
      this.$http(
        "/stage/reservation/getAppletTitleForBack",
        {
          museumId: this.museumId,
          type: 0,
        },
        "get",
        (res) => {
          if (res.data.code == 200) {
            this.chengweiId = res.data.data.id;
            this.chengwei = res.data.data.name;
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    // 详细地址
    DetailedAddress() {
      this.$http(
        "/stage/museum/searchAddress",
        { keyword: this.dagai },
        "get",
        (res) => {
          this.addreses = res.data.data;
          console.log(this.addreses);
        }
      );
    },
    yasuo() {
      this.modal2 = true;
      this.image = "";
    },
    getAppletTitleForBack2() {
      this.$http(
        "/stage/reservation/getAppletTitleForBack",
        {
          museumId: this.museumId,
          type: 1,
        },
        "get",
        (res) => {
          if (res.data.code == 200) {
            this.shareId = res.data.data.id;
            this.shareText = res.data.data.name;
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    },

    change() {
      this.getAppMuseumDetail1();
      this.getAppMuseumDetail();
      this.getAppletTitleForBack1();
      this.getAppletTitleForBack2();
      this.uploadData.museumId = this.museumId;
    },
    // 地图
    chooseMap() {
      this.mapStatus = true;
      this.modal = true;
    },
    // 初始化
    handler({ BMap, map }) {
      let that = this,
        point = "",
        longitude = 116.403964,
        latitude = 39.915061;

      if (that.longitude == "0") {
        point = new BMap.Point(longitude, latitude);
        var pointChoose1 = new BMap.Point(longitude, latitude);
        var marker1 = new BMap.Marker(pointChoose1);
        map.addOverlay(marker1);
        marker1.setAnimation(BMAP_ANIMATION_BOUNCE);
        var label = new BMap.Label(longitude + "," + latitude, {
          offset: new BMap.Size(20, -10),
        });
        marker1.setLabel(label);
      } else {
        point = new BMap.Point(that.longitude, that.latitude);
        var pointChoose1 = new BMap.Point(that.longitude, that.latitude);
        var marker1 = new BMap.Marker(pointChoose1);
        map.addOverlay(marker1);
        marker1.setAnimation(BMAP_ANIMATION_BOUNCE);
        var label = new BMap.Label(that.longitude + "," + that.latitude, {
          offset: new BMap.Size(20, -10),
        });
        marker1.setLabel(label);
      }

      map.centerAndZoom(point, 12);

      map.addEventListener("click", showInfo);

      function showInfo(e) {
        map.clearOverlays();
        var pointChoose = new BMap.Point(e.Ag.lng, e.Ag.lat);
        var marker = new BMap.Marker(pointChoose);
        map.addOverlay(marker);
        marker.setAnimation(BMAP_ANIMATION_BOUNCE);
        var label = new BMap.Label(e.Ag.lng + "," + e.Ag.lat, {
          offset: new BMap.Size(20, -10),
        });
        marker.setLabel(label);

        var gc = new BMap.Geocoder();
        gc.getLocation(pointChoose, function (rs) {
          var addComp = rs.addressComponents;
          var address =
            addComp.province +
            addComp.city +
            addComp.district +
            addComp.street +
            addComp.streetNumber;
          that.aleardyChoose = address;
        });

        that.longitude = e.point.lng;
        that.latitude = e.point.lat;
      }

      that.local = new BMap.LocalSearch(map, {
        renderOptions: {
          map: map,
        },
      });
    },
    go() {
      this.local.search(this.search);
    },

    cascadeProvinceCity() {
      this.loading1 = true;
      this.$http("/stage/museum/cascadeProvinceCity", {}, "post", (res) => {
        if (res.data.code == 200) {
          for (let i = 0; i < res.data.data.length; i++) {
            this.data2.push({
              value: res.data.data[i].id,
              label: res.data.data[i].name,
              children: [],
            });
            for (let j = 0; j < res.data.data[i].cities.length; j++) {
              this.data2[i].children.push({
                value: res.data.data[i].cities[j].id,
                label: res.data.data[i].cities[j].name,
                children: [],
              });
              for (
                let z = 0;
                z < res.data.data[i].cities[j].cities.length;
                z++
              ) {
                this.data2[i].children[j].children.push({
                  value: res.data.data[i].cities[j].cities[z].id,
                  label: res.data.data[i].cities[j].cities[z].name,
                });
              }
            }
          }
          this.getAppMuseumDetail();
          this.getAppMuseumDetail1();
          this.getAppletTitleForBack1();
          this.getAppletTitleForBack2();
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },

    getAppMuseumDetail() {
      this.loading1 = true;
      let _this = this;
      _this.$http(
        "/stage/reservation/getAppMuseumDetail",
        {
          museumId: _this.museumId,
        },
        "get",
        (res) => {
          _this.videoUrl = res.data.data.videoUrl;
          if (res.data.code == 200) {
            _this.data = res.data.data;
            if (res.data.data.typeMuseum == undefined) {
              _this.data.typeMuseum = [];
            } else {
              _this.data.typeMuseum = res.data.data.typeMuseum.split(" ");
            }
            _this.data.pics2 = _this.prefix + _this.data.pics;
            (_this.data.openAppointment = _this.data.openAppointment
              ? "开启"
              : "关闭"),
              (_this.data.openAliAppointment = _this.data.openAliAppointment
                ? "开启"
                : "关闭"),
              (_this.data.openTeamAppointment = _this.data.openTeamAppointment
                ? "开启"
                : "关闭"),
              (_this.data.hasCommentService = _this.data.hasCommentService
                ? "开启"
                : "关闭"),
              (_this.data.simpleTeamBookSwitch = _this.data.simpleTeamBookSwitch
                ? "开启"
                : "关闭"),
              (_this.data.online = _this.data.online ? "开启" : "关闭"),
              (_this.data.openCulturalMall = _this.data.openCulturalMall
                ? "开启"
                : "关闭"),
              (_this.data.tempCloseFlag = _this.data.tempCloseFlag
                ? "开启"
                : "关闭"),
              (_this.cascaderValue = [
                _this.data.provinceCityParentId,
                _this.data.provinceCityId,
                _this.data.provinceDistrictId,
              ]);
            console.log(res.data.data.arrivalPavilion);
            console.log(res.data.data.arrivalPavilion.split("-"));
            var arrival = res.data.data.arrivalPavilion.split("-");
            if (arrival.length == 2) {
              this.data.arrivald1 = arrival[0];
              this.data.arrivald3 = arrival[1];
            } else if (arrival.length == 3) {
              this.data.arrivald1 = arrival[0];
              this.data.arrivald2 = arrival[1];
              this.data.arrivald3 = arrival[2];
            } else {
              this.data.arrivald1 = "";
              this.data.arrivald2 = "";
              this.data.arrivald3 = "";
            }
            console.log(_this.cascaderValue);
            console.log(res.data.data);
            _this.imgUrl = _this.data.pics;
            // _this.img = res.data.data.videoUrl;
            _this.longitude =
              res.data.data.longitude == undefined
                ? "0"
                : res.data.data.longitude;
            _this.latitude =
              res.data.data.latitude == undefined
                ? "0"
                : res.data.data.latitude;
            _this.address.latitude =
              res.data.data.latitude == undefined
                ? "0"
                : res.data.data.latitude;
            _this.address.longitude =
              res.data.data.longitude == undefined
                ? "0"
                : res.data.data.longitude;
            _this.address.detailAddress = res.data.data.address;
            // _this.mapStatus = true
          } else {
            _this.$Message.error(res.data.msg);
          }
          _this.loading1 = false;
        }
      );
    },

    getAppMuseumDetail1() {
      let _this = this;
      _this.$http(
        "/stage/reservation/getAppMuseumDetail",
        {
          museumId: _this.museumId,
        },
        "get",
        (res) => {
          this.teamNotifySwitch = res.data.data.teamNotifySwitch;
          this.notifyPhone = res.data.data.notifyPhone;
          _this.teamNotifySwitch = _this.teamNotifySwitch ? "开启" : "关闭";
        }
      );
    },
    aaa() {
      console.log(this.notifyPhone);
    },
    findphone() {
      if (this.teamNotifySwitch == "开启") {
        if (this.notifyPhone == "") {
          this.getAppMuseumDetail1();
          // this.reload();
          console.log(this.teamNotifySwitch);
          this.$message.error("请输入通知手机号");
        } else {
          console.log(this.notifyPhone);
          if (
            !/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/.test(
              this.notifyPhone
            )
          ) {
            this.$message.error("手机号码有误，请重填");
            this.getAppMuseumDetail1();
            return false;
          }
          this.$http(
            "/stage/reservation/enableOrDisableTeamNotify",
            {
              museumId: this.museumId,
              phone: this.notifyPhone,
            },
            "post",
            (res) => {
              console.log(res);
              this.$message.success("开启成功");
            }
          );
        }
      } else {
        this.$http(
          "/stage/reservation/enableOrDisableTeamNotify",
          {
            museumId: this.museumId,
            phone: this.notifyPhone,
          },
          "post",
          (res) => {
            console.log(res);
            this.$message.success("关闭成功");
          }
        );
      }
    },
    submit() {
      let typeMuseum = "";
      if (this.data.typeMuseum.length == 0) {
        this.$Message.success("请选择类型");
        return false;
      } else {
        if (this.data.typeMuseum[0] == "宗教场所") {
          if (
            this.data.typeMuseum[1] == "undefined" ||
            this.data.typeMuseum[1] == undefined
          ) {
            this.$Message.success("请选择小类型");
            return false;
          } else {
            typeMuseum =
              this.data.typeMuseum[0] + " " + this.data.typeMuseum[1];
          }
        } else {
          typeMuseum = this.data.typeMuseum[0];
        }
      }
      if (this.cascaderValue[2] == undefined || this.cascaderValue[2] == "0") {
        this.$Message.error("请选择所在城市");
        return false;
      }
      if (this.data.pics == "" || this.data.pics == undefined) {
        this.$Message.error("请上传图片");
        return false;
      }
      if (this.data.label == "" || this.data.label == undefined) {
        this.$Message.error("请输入展馆标签");
        return false;
      }

      console.log(this.data.videourl);
      console.log(this.address);
      console.log(this.data.arrivald1);
      console.log(this.data.arrivald2);
      console.log(this.data.arrivald3);
      if (this.data.arrivald1 == "") {
        this.$Message.error("请输入开馆时间");
        return false;
      }
      if (this.data.arrivald3 == "") {
        this.$Message.error("请输入闭馆时间");
        return false;
      }
      if (this.data.arrivald2 == undefined) {
        var ceshi = new Array(this.data.arrivald1, this.data.arrivald3);
        var ceshi2 = ceshi.join("-");
      } else {
        var ceshi = new Array(
          this.data.arrivald1,
          this.data.arrivald2,
          this.data.arrivald3
        );
        var ceshi2 = ceshi.join("-");
      }
      console.log(ceshi2);
      // if (this.latitude == "0" && this.longitude == "0") {
      //   this.$Message.error("请在地图上选择位置");
      //   return false;
      // }
      this.loading2 = true;

      this.$http(
        "/stage/reservation/updateAppMuseumSelf",
        {
          about: this.data.about,
          name: this.data.name,
          online: this.data.online == "开启" ? true : false,
          openCulturalMall: this.data.openCulturalMall == "开启" ? true : false,
          tempCloseFlag: this.data.tempCloseFlag == "开启" ? true : false,
          openAppointment: this.data.openAppointment == "开启" ? true : false,
          openAliAppointment:
            this.data.openAliAppointment == "开启" ? true : false,
          openTeamAppointment:
            this.data.openTeamAppointment == "开启" ? true : false,
          hasCommentService:
            this.data.hasCommentService == "开启" ? true : false,
          simpleTeamBookSwitch:
            this.data.simpleTeamBookSwitch == "开启" ? true : false,
          openingInformation: this.data.openingInformation,
          consultPhone: this.data.consultPhone,
          pics: this.data.pics,
          provinceCityId: this.cascaderValue[1],
          provinceCityParentId: this.cascaderValue[0],
          provinceDistrictId: this.cascaderValue[2],
          museumId: this.museumId,
          typeMuseum: typeMuseum,
          address: this.address.detailAddress,
          latitude: this.address.latitude,
          longitude: this.address.longitude,
          label: this.data.label,
          appId: this.data.appId,
          tempCloseTips: this.data.tempCloseTips,
          appletsPages: this.data.appletsPages,
          teamLimitMax: this.data.teamLimitMax,
          videoUrl: this.data.videoUrl,
          teamLimitMin: this.data.teamLimitMin,
          arrivalPavilion: ceshi2,
        },
        "post",
        (res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.saveOrUpdateAppletTitle1();
          } else {
            console.log(res);
            this.loading2 = false;
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    saveOrUpdateAppletTitle1() {
      this.$http(
        "/stage/reservation/saveOrUpdateAppletTitle",
        {
          id: this.chengweiId == undefined ? "" : this.chengweiId,
          museumId: this.museumId,
          name: this.chengwei,
          type: 0,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            this.saveOrUpdateAppletTitle2();
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading2 = false;
        }
      );
    },
    saveOrUpdateAppletTitle2() {
      this.$http(
        "/stage/reservation/saveOrUpdateAppletTitle",
        {
          id: this.shareId == undefined ? "" : this.shareId,
          museumId: this.museumId,
          name: this.shareText,
          type: 1,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            this.$Message.success("提交更新成功");
            this.getAppMuseumDetail();
            this.getAppMuseumDetail1();
            this.getAppletTitleForBack1();
            this.getAppletTitleForBack2();
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading2 = false;
        }
      );
    },
    uploadImg(data) {
      console.log(data);
      this.data.pics = data;
      console.log("图" + this.data.pics);
    },
    uploadvideo(data) {
      console.log(data);
      // this.data.pics2 = data;
      this.data.videoUrl = data;
      console.log("视频" + this.data.videoUrl);
    },
    oneshot() {
      this.centerDialogVisible = true;
    },
    sure() {
      this.$http("/stage/reservation/checkinTourZj", {}, "get", (res) => {
        console.log(res);
        console.log(res.data.data);
        if (res.data.code == 200) {
          this.open2();
        }
      });
      this.centerDialogVisible = false;
    },
    open2() {
      this.$message({
        message: "后台已收到入驻请求",
        type: "success",
      });
    },
  },
};
</script>

<style scoped>
.div {
  width: 48%;
  margin-left: 1%;
}
.div p {
  line-height: 30px;
}
.map {
  width: 100%;
  height: 500px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  overflow: hidden;
}
.yasuoImg {
  width: 100%;
  height: 300px;
  background: rgba(25, 190, 107, 0.2);
  text-align: center;
  line-height: 300px;
  font-size: 30px;
  cursor: pointer;
  color: rgba(25, 190, 107, 1);
  border-radius: 10px;
}
.inputFile {
  opacity: 0;
  width: 100%;
  left: 0;
  height: 100%;
  position: absolute;
  cursor: pointer;
}
.yasuoImg:hover {
  opacity: 0.8;
}
.yasuo {
  color: red;
  cursor: pointer;
}
.righttop {
  position: fixed;
  z-index: 999;
  top: 165px;
  right: 20px;
  padding: 10px;
  background: #19be6b;
  color: #fff;
  border-radius: 4px;
}
.res {
  z-index: 10000000000 !important;
}
.address-list {
  list-style: none;
}
.address-item {
  display: flex;
  align-content: center;
  justify-content: space-between;
}
.address-item {
  margin-bottom: 25px;
}
.address-item .name {
  width: 25%;
  color: black;
  font-size: 15px;
  font-weight: 600;
}
.address-item .detailAddress {
  width: 55%;
  font-size: 15px;
}
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
